/*
 * @Description:
 * @Author: LCL
 * @Date: 2021-11-24
 * @LastEditors: LCL
 * @LastEditTime: 2021-11-30
 * @FilePath: /beff/src/pages/ApprovalList/detail/index.tsx
 */

import ProcessAction from '@/components/Process/ProcessAction';
import ProcessActionHistory from '@/components/Process/ProcessActionHistory';
import ProcessHistory from '@/components/Process/ProcessHistory';
import ProcessList from '@/components/Process/ProcessList';
import { Affix, Button, Card, Descriptions, Divider, PageHeader, Space, Spin, Table } from 'antd';
import { useEffect, useState } from 'react';
import { getDetailData } from './service';

type SearchProps = {
  location: {
    query: { sn: string; type: string; title: string };
  };
};
const Detail: React.FC<SearchProps> = (props) => {
  const { type, sn, title } = props.location.query;
  const [detailData, setDetailData] = useState<any>({});
  const [processList, setProcessList] = useState<any>([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    const getDetailDataFn = async () => {
      try {
        setLoading(true);
        const result = await getDetailData(type, { sn });
        if (result.errorCode === '0') {
          setDetailData(result.data);
          setLoading(false);
        }
      } catch (_) {
        setLoading(false);
      }
    };
    getDetailDataFn();
  }, [sn, type]);
  return (
    <>
      <PageHeader
        className="site-page-header"
        style={{ background: '#fff' }}
        title={title}
        subTitle={`流水单号:${detailData.serialNum}`}
        extra={<ProcessAction detailData={detailData} processList={processList} />}
      >
        <Divider style={{ marginBottom: 32 }} />
        <Card bordered={false}>
          <Spin spinning={loading}>
            <Descriptions title="申请人信息" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="员工姓名">{detailData.staffName}</Descriptions.Item>
              <Descriptions.Item label="员工ID">{detailData.staffId}</Descriptions.Item>
              <Descriptions.Item label="所属部门">{detailData.department || ''}</Descriptions.Item>
              <Descriptions.Item label="手机号">{detailData.mobilePhone}</Descriptions.Item>
              <Descriptions.Item label="邮箱">{detailData.email}</Descriptions.Item>
              <Descriptions.Item label="申请日期">{detailData.createdDtm}</Descriptions.Item>
            </Descriptions>
            <Divider style={{ marginBottom: 32 }} />
            <Descriptions title="请假详情" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="开始日期">{detailData.startDate}</Descriptions.Item>
              <Descriptions.Item label="结束日期">{detailData.endDate}</Descriptions.Item>
              <Descriptions.Item label="休假天数">{detailData.totalDays}</Descriptions.Item>
              <Descriptions.Item label="休假类型">{detailData.vacationType}</Descriptions.Item>
              <Descriptions.Item label="休假原因">{detailData.reason}</Descriptions.Item>
            </Descriptions>
            <Divider style={{ marginBottom: 32 }} />
            <Descriptions
              title={
                <Space>
                  流程进度
                  <ProcessHistory serialNum={detailData?.serialNum} />
                </Space>
              }
              style={{ marginBottom: 32 }}
            >
              <Descriptions.Item label="">
                <ProcessList
                  serialNum={detailData?.serialNum}
                  onDataChange={(data: any) => {
                    setProcessList(data);
                  }}
                />
              </Descriptions.Item>
            </Descriptions>
            <Divider style={{ marginBottom: 32 }} />
            <Descriptions
              title="审批历史"
              style={{ marginBottom: 32 }}
            >
              <Descriptions.Item label="">
                <ProcessActionHistory instanceId={detailData?.instanceId} />
              </Descriptions.Item>
            </Descriptions>
          </Spin>
        </Card>
      </PageHeader>
    </>
  );
};

export default Detail;
